import { createSignal } from "solid-js";
import { Word } from "./track.tsx";

export default function FallingWord(props: { word: Word; x: number | string; addMark: () => void; }) {
  const [clicked, setClicked] = createSignal<boolean>(false);

  return (
    <div
      class="bg-primary w-48 h-40 p-8 text-center text-3xl text-primary-content rounded-3xl cursor-pointer"
      classList={{'invisible': clicked()}}
      style={{ transform: `translateX(${props.x})` }}
      onClick={() => { setClicked(true); props.addMark(); }}
    >
      <div>
        {props.word.word}
      </div>
      <div>{props.word.translation}</div>
    </div>
  );
}
